<template>
	<view class="container">
		<view v-if="commentList.length" class="box">
			<view v-for="item in commentList" :key="item.id" class="comment-item">
				<navigator :url="'/pages/detail/detail?businessId=' + item.businessId" class="business-link">
					{{ item.businessName }} <uni-icons type="right" size="18" color="#888"></uni-icons>
				</navigator>

				<view class="comment-content">
					<image :src="item.userAvatar" mode="widthFix" class="avatar"></image>
					<view class="info">
						<view>{{ item.userName }}</view>
						<view class="content">{{ item.content }}</view>
						<uni-rate :value="item.star" readonly></uni-rate>
					</view>
				</view>

				<view class="footer">
					<text class="time">{{ item.time }}</text>
					<view class="delete-btn" @click="showDeleteConfirm(item.id)">
						<uni-icons type="trash" size="18" color="#888"></uni-icons>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-comment-message">
			暂无评论
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			commentList: [],
			user: uni.getStorageSync('xm-user')
		}
	},
	onLoad() {
		this.load()
	},
	methods: {
		showDeleteConfirm(id) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这条评论吗？',
				success: (res) => {
					if (res.confirm) {
						this.del(id)
					}
				}
			})
		},
		del(id) {
			this.$request.del('/comment/delete/' + id).then(res => {
				this.load()
			}).catch(err => {
				console.error('Error deleting comment:', err)
				uni.showToast({ title: '删除失败', icon: 'none' })
			})
		},
		load() {
			this.$request.get('/comment/selectAll', { userId: this.user.id }).then(res => {
				this.commentList = res.data || []
			}).catch(err => {
				console.error('Error loading comments:', err)
				uni.showToast({ title: '加载评论失败', icon: 'none' })
			})
		}
	}
}
</script>

<style scoped>
.container { padding: 20rpx; }
.box { }
.comment-item { border-bottom: 2rpx solid #eee; padding: 20rpx 0; }
.business-link { font-size: 34rpx; display: inline-block; margin-bottom: 10rpx; }
.comment-content { display: flex; align-items: center; gap: 20rpx; }
.avatar { width: 120rpx; border-radius: 50%; }
.info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.content { padding-top: 10rpx; font-size: 24rpx; }
.footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10rpx; }
.time, .delete-btn { font-size: 24rpx; color: #888; }
.delete-btn { display: flex; align-items: center; gap: 5rpx; cursor: pointer; }

/* 添加没有评论时的提示样式 */
.no-comment-message {
	text-align: center;
	font-size: 32rpx;
	color: #999;
	padding: 50rpx;
	border-radius: 10rpx;
	background-color: #f8f8f8;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	margin-top: 20rpx;
}
</style>